<template>
	<view class="iteminfo">
		<view class="iteminfoheader">
			<video id="videoid" src="http://127.0.0.1:3000/public/video/ceshi3.mp4" controls></video>
		</view>
		
		<view class="chai">
				<view  class="chaiitem" v-for="item in iteminfos" :key="item.id">
					<view class="left" @click="goitem(item.id)">
						
							<image @click="gocover(item.imgurl)" :src="item.imgurl" mode="aspectFill"></image>
						
					</view>
					<view class="right">
						<text @click="goitem(item.id)" class="title">{{item.title}}</text>
						<star :score='item.star' />
						<text class="list1">类型：{{item.catagory}}</text>
						<text class="list1">主演：{{item.zhuyan}}</text>
						<text class="list1">上映时间：{{item.pushdate}}</text>
						<view class="zan">
							<text @click="changezhan" v-show="!iszhan" class="iconfont icon-dianzan"></text>
							<text  @click="changezhan" v-show="iszhan" class="iconfont icon-zan color2"></text>
							<text  @click="changezhan" v-show="iszhan" class="iconfont icon-yijin14-cai-copy"></text>
							<text  @click="changezhan" v-show="!iszhan" class="iconfont icon-yijin14-cai color2"></text>
						</text>
					</view>
				</view>
		</view>
		</view>
	<view class="itemfooter">
		<text class="header">剧情概述</text>
		<text class="footer">{{iteminfos[0].jieshan}}</text>
	</view>
	
		<scroll-view scroll-x="true" >		
			<image @click="proview(item.id)" :src="item.url" mode="aspectFill" v-for="item in photolist" :key="item.id"></image>
		</scroll-view>
	</view>
</template>

<script>
	import { request } from "../../request/index.js"
	import star from '../../components/index/star.vue'
	export default{
		data(){
			return { 
				id:0,
				iteminfos:[],
				photolist:[
					{url:"http://127.0.0.1:3000/public/images/11.jpg",id:1},
					{url:"http://127.0.0.1:3000/public/images/12.jpg",id:2},
					{url:"http://127.0.0.1:3000/public/images/13.jpg",id:3},
					{url:"http://127.0.0.1:3000/public/images/14.jpg",id:4},
					{url:"http://127.0.0.1:3000/public/images/16.jpg",id:5}, 
					{url:"http://127.0.0.1:3000/public/images/17.jpg",id:6},
					{url:"http://127.0.0.1:3000/public/images/18.jpg",id:7},
					{url:"http://127.0.0.1:3000/public/images/19.jpg",id:8},
					{url:"http://127.0.0.1:3000/public/images/20.jpg",id:9},
				],
			}
		},
		//页面初次加载
		onReady(){
			this.ctx=uni.createVideoContext("videoid")
		},
		onLoad(e){
		this.id=e.id
		this.getitem()
		},
		//页面再次被打开
		onShow(){
			this.ctx.play()
		},
		//页面隐藏
		onHide(){
			this.ctx.pause()
		},
		//微信分享
		onShareAppMessage(res){
			return{
				title:this.iteminfos[0].title,
				path:`/pages/movie/moveie?id=${this.id}`
			}
		},
		components:{
			star
		},
		onNavigationBarButtonTap(e){
			console.log(e)
		},
		methods:{
			//去图片详情页
			gocover(e){
				uni.navigateTo({
					url:`../cover/cover?url=${e}`
				})
			},
			//大图预览
			proview(index){
				let arr=this.photolist.map(item=>{
					return item.url
				})
				// console.log(arr)
				uni.previewImage({
					current:arr[index-1],
					urls:arr
				})
			},
			//获取该电影的详情
			getitem(){
				request({
					url:`/iteminfo?id=${this.id}`,
					method:'get',	 
				}).then(res=>{
					// console.log(res.data.data[0])	
					this.iteminfos=res.data.data
				}) 
			}
		}
	}
</script>

<style lang="less" scoped>
	.iteminfo{
		.iteminfoheader{
			width:100vw;
			padding: 10upx;
			video{
			width: 100%;	
			}
		}
		.chai{
			width: 100vw;
		.chaiitem{
			width: 100%;
			display: flex;
			margin-top: 10upx;
			border-bottom: 1px solid #ccc;
			.left{
				flex:1;
				padding: 10upx;
				image{
					width:350upx;
					height: 400upx;
				}
			}
			.right{
				flex:1;
				padding-right:10upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
			.title{
				font-size: 20px;
				font-weight: 500;
				display: block;
			}
				.list1{
					font-size: 14px;
					display: block;
					color: #ccc;
				}
				.zan{
					.iconfont{
						margin-left:15upx;
						font-size: 40upx;
					}
				}
			}
		}	
		}
		.itemfooter{
			padding: 15upx 0;
		
			.header{
				display: block;
				font-size: 40upx;
				font-weight: 600;
				padding-left:20upx;
			}
			.footer{
				padding: 5upx 10upx;
				font-size: 32upx;
				color: #bbbbbb;
			}
		}
		
		scroll-view{
			max-width: 100%;
			white-space: nowrap;
			display: flex;
			border-top: 1px solid #ccc;
			image{
				padding: 10upx;
				width: 280upx;
				height: 400upx;
				
			}
		}
	}
	
	
</style>
